<template>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <div ref="target">main</div>
</template>

<script>
import { useIntersectionObserver } from "@vueuse/core";
import { ref } from "vue";

export default {
  name: "observe",
  setup() {
    const target = ref();
    // 第一个参数为监听的元素;
    //第二个参数为回调函数,参数为[{isIntersecting}],通过数组和对象解构
    //返回值为对象,可以结构出stop方法,调用stop方法停止监听
    const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
      if (isIntersecting) {
        console.log(isIntersecting);
        // 调用stop方法停止监听
        stop();
      }
    });

    return { target };
  },
};
</script>

<style scoped></style>
